<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<!-- 项目前置 -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<!-- 本页前置 -->
<link rel="stylesheet" href="css/login.css">
<script src="js/jquery.form.js" charset="UTF-8"></script>
<script src="js/login.js" charset="UTF-8"></script>
<!-- 本页前置 -->
<!-- 项目前置 -->

<script type="text/javascript">
function check() {
	
	
	$('#province').val("");
	$('#city').val("");
	$('#areacode').val("");
	$('#zip').val("");
	$('#company').val("");

	
	
	var phone=$('#phone').val();
	phone=encodeURI(phone);//把中文转化为万国码，试一试
		
	$.ajax({
		url : "PhoneServlet",
		type : "post",
		data : {
			phone : phone
		},
		dataType : "json",
		success : function(data) {
	
			$('#province').val(data.result.province);
			$('#city').val(data.result.city);
			$('#areacode').val(data.result.areacode);
			$('#zip').val(data.result.zip);
			$('#company').val(data.result.company);

		},
		error : function(d1, d2) {
			
			alert(d1.status + "--" + d2);
		}
	});
}
</script>
</head>

<body>
	<%@include file="top.jsp"%>
	<div
		style="background: url(images/checkbg.jpg) no-repeat center center;">
		<div class="login-layout container">
			<div class="form-box login">
				<div class="tabs-nav">
					<h2>查询手机号，了解多一点 </h2>
				</div>
				<div class="tabs_container">
					<form class="tabs_form" action=""
						method="post" id="login_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone" name="phone" id="phone"
									required placeholder="手机号" maxlength="11" autocomplete="off"
									type="text" />
							</div>
						</div>
						
						<!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="login_error"></div>
						</div>
						<button class="btn btn-large btn-primary btn-lg btn-block submit"
							id="login_submit" type="button" onclick="check()" >查询一下</button>
						<br>
						<div class="form-group"><!-- 省份 -->
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control " name="province" id="province"
									required placeholder="手机号所属省份" readonly="readonly" autocomplete="off"
									type="text" />
							</div>
						
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control " name="city" id="city"
									required placeholder="手机号所属城市" readonly="readonly" autocomplete="off"
									type="text" />
							</div>
						
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control" name="areacode" id="areacode"
									required placeholder="手机号所属区号" readonly="readonly" autocomplete="off"
									type="text"  />
							</div>
						
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control " name="zip" id="zip"
									required placeholder="手机号所属邮政编码" readonly="readonly" autocomplete="off"
									type="text"  />
							</div>
						
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control" name="company" id="company"
									required placeholder="手机号所属公司" readonly="readonly" autocomplete="off"
									type="text" />
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- 登录 -->
		</div>
	</div>
	<script>
		$(document).ready(function() {
			// 判断直接进入哪个页面 例如 login.php?p=register
			switch ($.getUrlParam('p')) {
			case 'register':
				$('.register').show();
				break;
			case 'resetpwd':
				$('.resetpwd').show();
				break;
			default:
				$('.login').show();
			}
			;

		});
	</script>
	<%@include file="bottom.jsp"%>
</body>
</html>
